<template>
	<view class="dispose-record-detail">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">

			<view class="item" v-if="recordType==1">
				<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/beijing-icon.png"
					mode=""></image>
				<view class="title">
					设施名称：{{data.devicename}}
				</view>

				<view class="code">设施编号：{{data.devicecode}}</view>
				<view class="bgc-wrap">
					<view class="one-line">
						<view class="left">涉废类型：{{ adviceTypeList?.find((item)=>item.value==data.wastetype)?.text }}
						</view>
						<view class="right" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
							涉废代码：{{data.wastecode}}</view>
					</view>
					<view class="one-line">
						<view class="left">本次更换量：{{data.wastenum}}kg</view>
						<view class="right">本次填充量：{{data.putinnum}}kg</view>
					</view>
					<view class="one-line">
						<view class="left">碘值：{{data.dianval}}</view>
						<view class="right">使用周期：{{data.circledays}}天</view>
					</view>
					<view class="one-line">
						<view class="left">预计下次更换时间：{{data?.nextchangedate?.split(' ')[0]}}</view>
						<view class="right" style="width: 0;flex: 0;"></view>
					</view>
				</view>
				<view class="change-time">
					本次更换时间：{{data?.committime || '无'}}
				</view>
				<view class="img-wrap">
					<view class="pre-img">
						更换前图片：<text @click="searchImage(data.changebeforeimgurl)">点击查看</text>
					</view>
					<view class="padding-img">
						更换中图片：<text @click="searchImage(data.changemidimgurl)">点击查看</text>
					</view>
				</view>
				<view class="suf-img">
					更换后图片：<text @click="searchImage(data.changeafterimgurl)">点击查看</text>
				</view>
				<view class="suf-img">
					碘值监测报告图片：<text @click="searchImage(data.imgdianvalurl)">点击查看</text>
				</view>
				<view class="suf-img">
					相关发票图片：<text @click="searchImage(data.imgticketurl)">点击查看</text>
				</view>
				<view class="suf-img">
					入库暂存照片：<text @click="searchImage(data.imgstockkeepurl)">点击查看</text>
				</view>
				<!-- 	<view class="suf-img">
					用电缴费单：<text @click="searchImage(data.imgpowerfeeurl)">点击查看</text>
				</view> -->
			</view>
			<view class="btn-wrap">
				<button @click="updateMsg">修改信息</button>
			</view>

		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		reactive,
		ref,
		computed
	} from 'vue'

	let recordType = ref(1)
	let adviceTypeList = ref([])
	let name = "记录详情"
	let id = ref('')
	let data = ref({})
	onShow(() => {

	})
	onLoad((e) => {

		id.value = e.id
		http({
			url: "/stock/detail",
			data: {
				id: id.value
			}
		}).then((res) => {
			data.value = res.data
		})
	})
	let updateMsg = () => {

		uni.redirectTo({
			url: `/contorllerPageOther/adminAddDevice/adminAddDevice?add=0&msg=${JSON.stringify(data.value)}&id=${id.value}`
		})
	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	let searchImage = (url) => {
		if (!url) {
			uni.showToast({
				title: '暂无照片',
				icon: 'none'
			})
			return
		}
		let imgUrl = url.split(',')

		uni.previewImage({
			urls: imgUrl,
			current: 0
		})
	}
</script>

<style lang="scss" scoped>
	.dispose-record-detail {
		width: 100vw;
		height: 100vh;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			width: 100vw;
			height: calc(100vh - 160rpx);
			background-color: #F0F2F5;
			padding-top: 22rpx;
			display: flex;

			flex-direction: column;
			align-items: center;

			.btn-wrap {
				margin-top: 150rpx;

				button {
					margin: 0 auto;
					width: 672rpx;
					height: 88rpx;
					background: #0874FA;
					border-radius: 44rpx;
					line-height: 88rpx;
					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;

				}
			}

			.item {
				width: 690rpx;
				height: 850rpx;
				background: #FFFFFF;
				border-radius: 14rpx;

				position: relative;

				.change-time {
					padding-left: 37rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-top: 26rpx;
				}

				.img-wrap {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					padding-left: 37rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 47rpx;
					margin-top: 20rpx;

					.pre-img {

						text {
							color: #0874FA;
						}
					}

					.padding-img {
						text {
							color: #0874FA;
						}
					}
				}

				.suf-img {
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					padding-left: 37rpx;

					text {
						color: #0874FA;
					}
				}

				.bgc-wrap {
					width: 655rpx;
					height: 269rpx;
					background: #E5EAEF;
					border-radius: 14rpx;
					margin: 0 auto;
					padding-left: 18rpx;
					padding-right: 34rpx;
					padding-top: 26rpx;

					.one-line:nth-of-type(2),
					.one-line:nth-of-type(3),
					.one-line:nth-of-type(4) {
						margin-top: 19rpx;
					}

					.one-line {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left,
						.right {

							font-weight: 400;
							font-size: 28rpx;
							color: #666666;
							flex: 1;
						}

						.right {
							width: 250rpx;
							text-align: left;

						}


					}
				}

				image {
					position: absolute;
					top: 84rpx;
					height: 25rpx;
					width: 690rpx;
					left: 0;
				}

				.title {

					font-weight: 500;
					font-size: 31rpx;
					color: #333333;
					line-height: 33rpx;
					height: 93rpx;

					line-height: 93rpx;
					padding-left: 34rpx;
				}

				.name,
				.code {
					margin-top: 34rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					padding-left: 34rpx;

				}

				.code {
					margin-bottom: 24rpx;
				}
			}
		}
	}
</style>